<template>
  <BasicDrawer
    v-bind="$attrs"
    :showFooter="true"
    @register="registerDrawer"
    @close="handleDrawerClose"
    width="80%"
  >
    <template #title>
      <Icon :icon="getTitle.icon" class="m-1 pr-1" />
      <span> {{ getTitle.value }} </span>
    </template>
    <PageWrapper>
      <div class="mx-auto" :key="renderKey">
        <Steps :current="currentTab" class="steps">
          <Step title="发票上传" />
          <Step title="OCR识别" />
          <Step title="数据对比" />
        </Steps>
        <div class="p-5 w-full h-full">
          <!-- <FirstForm v-show="currentTab === 0" />
        <SecondForm v-show="currentTab === 1" /> -->
          <Step1
            ref="step1Ref"
            @next="handleStep1Next"
            v-if="currentTab === 0"
            :invoiceParams="invoiceParams"
          />
          <Step2
            ref="step2Ref"
            @prev="handleStepPrev"
            @next="handleStep2Next"
            v-if="currentTab === 1"
            :invoiceParams="invoiceParams"
          />
          <Step3
            ref="step3Ref"
            @prev="handleStep3Prev"
            @next="handleStep3Next"
            v-if="currentTab === 2"
            :invoiceParams="invoiceParams"
          />
        </div>
      </div>
    </PageWrapper>

    <!-- 固定底部操作按钮：根据当前步骤动态展示 -->
    <template #footer>
      <!-- 居中 -->
      <div class="flex justify-center">
        <!-- Step1：仅下一步 -->
        <a-button v-if="currentTab === 0" type="primary" @click="onNextFromStep1">
          下一步
        </a-button>

        <!-- Step2：上一步、下一步 -->
        <template v-else-if="currentTab === 1">
          <a-button type="default" class="mr-20" @click="onPrevFromStep2">上一步</a-button>
          <a-button type="primary" @click="onNextFromStep2">下一步</a-button>
        </template>

        <!-- Step3：上一步、完成匹配 -->
        <template v-else-if="currentTab === 2">
          <a-button type="default" class="mr-20" @click="onPrevFromStep3">上一步</a-button>
          <a-button type="primary" @click="onCompleteMatch">完成匹配</a-button>
        </template>
      </div>
    </template>
  </BasicDrawer>
</template>
<script lang="ts" setup name="ViewsSrmCwInvoice">
  import { ref, computed, unref, provide } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { PageWrapper } from '/@/components/Page';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { Step, Steps } from 'ant-design-vue';
  import Step1 from './step/step1.vue';
  import Step2 from './step/step2.vue';
  import Step3 from './step/step3.vue';
  import { router } from '/@/router';
  import { createInvoiceApi, type InvoiceApi } from './useInvoiceApi';
  const currentTab = ref(0); // 改为1，默认显示第二步
  // 用于在 Drawer 关闭时强制重新渲染内容，达到初始化效果
  const renderKey = ref(0);
  const step1Ref = ref<any>(null);
  const step2Ref = ref<any>(null);
  const step3Ref = ref<any>(null);
  //   type djno, pkCorp
  // 定义一个接口，用于存储 djno 和 pkCorp
  interface InvoiceParams {
    djno: string;
    pkCorp: string;
  }

  const invoiceParams = ref<InvoiceParams>({
    djno: '',
    pkCorp: '',
  });

  const { meta } = unref(router.currentRoute);
  const { t } = useI18n('srm/cw.invoice');
  const getTitle = computed(() => ({
    icon: meta.icon || 'i-ant-design:book-outlined',
    // value: record.value.isNewRecord ? t('新增开票清单') : t('编辑开票清单'),
    value: t('开票通知单'),
  }));

  // 统一 API 注入：由父组件决定 normal/vmi
  const invoiceApiRef = ref<InvoiceApi>(createInvoiceApi('normal'));
  provide('invoiceApi', invoiceApiRef);

  const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
    setDrawerProps({ loading: true });
    console.log('data', data);
    // 根据来源选择 API 组
    const mode = data?.source === 'vmi' ? 'vmi' : 'normal';
    invoiceApiRef.value = createInvoiceApi(mode);
    invoiceParams.value.djno = data.djno;
    invoiceParams.value.pkCorp = data.company.companyCode;
    setDrawerProps({ loading: false });
  });

  // Drawer 关闭时重置到第一个步骤
  function handleDrawerClose() {
    currentTab.value = 0;
    // 重置参数，避免下次打开使用旧数据
    invoiceParams.value = { djno: '', pkCorp: '' } as any;
    // 通过变更 key 强制子内容重新挂载，确保各步骤重新初始化
    renderKey.value++;
  }

  function handleStep1Next() {
    currentTab.value = 1;
  }
  function handleStep2Next() {
    currentTab.value = 2;
  }
  function handleStep3Next() {
    currentTab.value = 3;
  }
  function handleStepPrev() {
    currentTab.value--;
  }
  function handleStep3Prev() {
    console.log('handleStep3Prev');
    // currentTab.value = 2;
    currentTab.value--;
  }

  // Drawer Footer 按钮事件：调用子组件暴露的方法
  function onNextFromStep1() {
    step1Ref.value?.next?.();
  }
  function onPrevFromStep2() {
    step2Ref.value?.prev?.();
  }
  function onNextFromStep2() {
    step2Ref.value?.next?.();
  }
  function onPrevFromStep3() {
    step3Ref.value?.prev?.();
  }
  function onCompleteMatch() {
    step3Ref.value?.next?.();
  }
</script>
